<template>
  <div class="dia">
    <div class="con">
      <h1>{{isAdd?'新增':'编辑'}}联系人</h1>
      <input type="text" placeholder="姓名" v-model="user.name" />
      <input type="text" placeholder="电话" v-model="user.tel" />
      <button type="button" class="btn btn-primary" @click="addItem">{{isAdd?'新增':'确定'}}</button>
      <button type="button" class="btn btn-warning" @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isAdd"],
  data() {
    return {
      user: {
        name: "",
        tel: "",
      }
    };
  },
  methods: {
    addItem() {
      //1.判断必须要有内容
      if (!this.user.name || !this.user.tel) {
        alert("请输入必要内容");
        return;
      }

      if (this.isAdd) {
        //是添加
        //2.这个内容应该添加到原数据 -- 父组件
        //3.弹框显示关闭 -- 父组件
        this.$emit("add", this.user);
      } else {
         //1.告诉父组件，弹框关闭
         //2.修改父组件数据, 改那个:下标，改成什么：this.user
         this.$emit("editItem",this.user)
      }
    },
    //点击取消
    cancel() {
      this.$emit("cel");
    },
    //数据回显
    lookup(res,index) {
      this.user = {
        ...res,
        index,
      };
    }
  }
};
</script>

<style scoped>
.dia {
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
}
.con {
  width: 100vw;
  height: 300px;
  background: #fff;
  text-align: center;
  overflow: hidden;
  position: absolute;
  top: 50%;
  margin-top: -50%;
}
.con h1 {
  margin: 30px 0;
}
.con input {
  display: block;
  width: 60vw;
  height: 40px;
  border: 1px solid;
  margin: 0 auto 10px;
}
.con button {
  margin: 10px;
}
</style>